@use 'mixins' as *;

#__docusaurus {
  & > main#home {
    @include flex(column, center, flex-start);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: rgba(15, 23, 42, 0.75);

    ::selection {
      background-color: rgba(60, 0, 255, 0.25);
    }

    ::-webkit-scrollbar {
      display: none !important;
    }

    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -2;
      background-image: url('@site/static/img/bg.svg');
      opacity: 0.5;
    }

    &::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(16, 16, 19, 0) 24.885627815315313%,
        rgb(16, 16, 19) 100%
      );
    }

    & > .container {
      @include flex(column, center, flex-start);
      width: 100%;
      margin: 0;
      padding: 0;
      overflow-y: auto;
      overflow-x: hidden;

      @media (max-width: 720px) {
        justify-content: flex-start;
      }

      & > header {
        @include flex(row, center, space-between);
        width: 100%;
        padding: 15px 25px;
        font-family: 'Montserrat', sans-serif;

        menu {
          @include flex(row, center, flex-start);
          gap: 15px;
          margin: 0;
          padding: 0;

          a {
            @include flex(row, center, flex-start);
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            transition: color 0.25s;

            svg {
              min-width: 18px;
              min-height: 18px;
              fill: #fff;
              stroke: #fff;
              opacity: 0.5;
              filter: grayscale(1);
              transition:
                opacity 0.25s,
                fill 0.25s,
                stroke 0.025s;
            }

            &:hover {
              color: #ff84df;

              svg {
                filter: none;
                opacity: 1;
                stroke: #ff84df;
                fill: #ff84df;
              }
            }

            @media (max-width: 420px) {
              &.hide-mobile {
                display: none;
              }
            }
          }
        }
      }

      #this-is-poku {
        @include flex(column, center, center);
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 75px 25px;

        &,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        button {
          font-family: 'Montserrat', sans-serif;
          font-optical-sizing: auto;
          margin-bottom: 0;
        }

        @media (max-width: 720px) {
          justify-content: flex-start;
        }

        @media (max-height: 890px) {
          justify-content: flex-start;
        }

        & > h1 {
          width: 100%;
          padding: 50px 0;
          font-size: 60px;
          text-align: center;
          font-weight: 700;
          font-style: normal;
          font-variation-settings: 'wdth' 100;
          text-shadow: 2px 2px 1px #242743ab;
          color: #fff;

          @media (max-width: 920px) {
            font-size: 50px;
          }

          @media (max-width: 760px) {
            max-width: 480px;
          }

          @media (max-width: 440px) {
            font-size: 36px;
          }

          .typing {
            animation-name: color-title;
            animation-duration: 25s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
          }
        }

        & > div {
          @include flex(column, center, flex-start);
          gap: 25px;
          padding: 50px;

          small {
            @include flex(row, center, center);
            gap: 5px;
            text-align: center;

            svg {
              width: 20px;
              height: 20px;
              stroke-width: 1.5px;
              animation-name: color-title;
              animation-duration: 25s;
              animation-timing-function: ease-in-out;
              animation-iteration-count: infinite;
            }
          }

          a {
            @include flex(row, center, space-between);
            gap: 10px;
            width: max-content;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 1px 1px 1px #24274356;
            color: #fff;
            animation-name: bg-start;
            animation-duration: 25s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            cursor: pointer;

            svg {
              width: 18px;
              height: 18px;
              filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
            }

            &:hover {
              background-color: #ff73da !important;
            }
          }
        }

        & > p {
          width: calc(25px + 480px * 2);
          max-width: 100%;
          margin: 0;
          font-size: 14px;
          font-weight: 500;
          font-family: var(--ifm-font-family-base);
          text-align: left;

          a {
            animation-name: color-title;
            animation-duration: 25s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
          }
        }

        & > nav {
          @include flex(row, stretch, center, wrap);
          gap: 35px 25px;
          width: 100%;

          section {
            @include flex(column, flex-start, stretch);
            width: 480px;
            max-width: 100%;
            border-radius: 15px;
            background-color: rgba(30, 38, 59, 0.35);
            backdrop-filter: blur(2px);
            padding: 15px 20px;
            box-shadow: 1.5px 1.5px 7.5px #00000069;

            h2,
            h3 {
              position: relative;
              @include flex(row, flex-end, space-between);
              width: 100%;
              padding-bottom: 10px;
              margin-bottom: 10px;
              border-bottom: 2px dashed #ffffff10;
              text-align: left;
              font-size: 16px;
              color: #d5daea;

              span {
                padding-right: 60px;

                em {
                  font-weight: 400;
                  color: #98a1bc;
                }
              }

              svg {
                width: 50px;
                min-width: 50px;
                filter: drop-shadow(2.5px 2.5px 2.5px #00000025);
              }

              &.float {
                margin-top: 40px;

                svg {
                  position: absolute;
                  top: -70px;
                  right: -25px;
                  width: 80px;
                  min-width: 80px;
                  filter: drop-shadow(2.5px 2.5px 2.5px #00000025);
                }
              }
            }

            h3 {
              svg {
                padding: 10px;
                width: 72px;
                min-width: 72px;
              }
            }

            & > div {
              flex-grow: 1;
              font-size: 14px;
              font-weight: 300;
              font-family: var(--ifm-font-family-base);

              p {
                color: #98a1bc;

                svg {
                  height: 14px;
                  transform: translate(-3.5px, 1px);
                }
              }
            }

            a {
              font-size: 14px;
              animation-name: color-title;
              animation-duration: 25s;
              animation-timing-function: ease-in-out;
              animation-iteration-count: infinite;

              svg {
                transform: translateY(3px);
                height: 16px;
              }
            }
          }
        }

        & > h2 {
          padding: 25px 0;
          margin-top: 50px;
          text-align: left;
          width: calc(25px + 480px * 2);
          max-width: 100%;

          @media (max-width: 1034px) {
            width: 480px;
          }

          span {
            &.feat {
              color: #ff84df;
            }
          }

          &:first-of-type {
            margin-top: 25px;
          }
        }

        & > menu {
          @include flex(row, stretch, center, wrap);
          gap: 35px 25px;
          width: 100%;
          margin: 0;
          padding: 0;

          section {
            @include flex(column, flex-start, stretch);
            width: 480px;
            max-width: 100%;

            h3 {
              @include flex(row, center, flex-start);
              width: 100%;
              font-size: 16px;
              color: #d5daea;
              padding-bottom: 10px;

              svg {
                height: 24px;
                fill: #435a8a96 !important;

                path {
                  fill: #435a8a96 !important;
                }

                & + svg {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }

      & > footer {
        @include flex(column, center, flex-start);
        gap: 5px;
        width: 100%;
        font-size: 13px;
        margin-top: 50px;
        margin-bottom: 50px;

        h4 {
          @include flex(row, center, flex-start);
          gap: 10px;

          svg {
            width: 18px;
            stroke: #ff84df;
          }
        }

        p {
          color: #98a1bc;
          margin: 0;
        }

        a {
          animation-name: color-title;
          animation-duration: 25s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
        }
      }

      .custom-code-block {
        position: relative;
        @include flex(row, center, space-between);
        width: 100%;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 2.5px 2.5px 5px #00000037;
        background-color: #1e263bbf;
        font-family: Monaco, monospace;
        font-size: 13px;
        text-shadow: 2px 2px 2px #13152dab;
        user-select: all;
        color: #98a1bc;

        button {
          background-color: transparent;
          border: none;
          cursor: pointer;

          svg {
            animation-name: color-title;
            animation-duration: 25s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            transition: stroke 0.25s;
          }

          &:hover {
            svg {
              stroke: #fff;
            }
          }
        }
      }
    }
  }
}

@keyframes color-title {
  0% {
    color: #4891ff;
  }
  25% {
    color: #c26cff;
  }
  50% {
    color: #4891ff;
  }
  75% {
    color: #c26cff;
  }
  100% {
    color: #4891ff;
  }
}

@keyframes bg-start {
  0% {
    background-color: #4891ff;
  }
  25% {
    background-color: #c26cff;
  }
  50% {
    background-color: #4891ff;
  }
  75% {
    background-color: #c26cff;
  }
  100% {
    background-color: #4891ff;
  }
}
